import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("appleBasket")
@observer
class AppleOverview extends Component {
  render() {
    const { appleBasket } = this.props;
    const { numberOfExistingApples, weightOfExistingApples, numberOfEatenApples, weightOfEatenApples } = appleBasket
    return (
      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">
            {numberOfExistingApples}个苹果，{weightOfExistingApples}克
        </div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">
            {numberOfEatenApples}个苹果，{weightOfEatenApples}克
        </div>
        </div>
      </div>
    );
  }
}

export default AppleOverview;
